iT邦幫忙

2024 iThome 鐵人賽

DAY 15
0
Modern Web

Rive 的理論與實務系列 第 15

[Day 15] Rive 的實作原理

  • 分享至 

  • xImage
  •  

前三天的內容比較硬一點,是一些我們實務開發的心得,為了舒緩一下節奏,今天會稍微回來解釋一下 Rive 的實作原理,為接下來更進階的內容作準備。

Rive 本質上是 JSON

Rive 跟 Lottie 一樣,雖然自己發明了一個檔案類型,但本質上都是一個用 JSON 表示動畫的技術。設計師在 Rive Editor 做出動畫,經過 Rive Editor 轉化成 JSON,也就是 .riv 檔;工程師拿到 .riv 檔後,丟給 Rive Runtime 解析,同時由它幫你繪製在 canvas 上面。

這告訴我們幾件事

首先既然 Rive 是畫在 canvas 上面的,所以 canvas 的知識,或者說前端動畫渲染的知識,放到 Rive 大部分都適用。例如 Rive 跟其他前端動畫一樣,無法在背景執行,瀏覽器除了會幫你凍結以外,還會自作聰明的在你回到畫面時再撥放,這有時候會造成一些意料之外莫名其妙的問題。

再者既然 Rive 是解析 JSON, 所以理論上 Rive 的操作空間比想像中的大。我的意思是說,一來 JSON 理論上可以儲存很多資料,所以在 Rive Editor 轉化 JSON 前可以摻一些不只是跟動畫有關的其他資訊進去。而來 Rive Runtime 在解析 JSON 時,理論上也可以做一些手腳,甚至理論上來說,前端可以直接透過硬改 JSON 來改變動畫。

當然以上這些實際上要做到會很有難度,但不是不能跟 Rive 官方許願,例如我們曾經跟官方許願過,希望能讓從開發者工具下載下來的 .riv 檔不能直接從 Rive Editor 打開,避免我們辛苦做好的 .riv 檔被抄襲,我猜應該就是在 JSON 裡面做了一點手腳。
https://ithelp.ithome.com.tw/upload/images/20240910/20168679srBZe5YjG3.png

小結

今天的內容比較輕鬆,但對於接下來比較進階的內容來說還蠻重要的,先理解 Rive 本質上是 JSON 後,比較能理解接下來的 Low-level APIs 的一些含意。另外這裡要稱讚一下 Rive 團隊,他們很積極的在跟社群溝通與新增功能,可以多跟他們許願看看。


上一篇
[Day 14] 實務建議:多用 store
下一篇
[Day 16] Rive 的防抄襲措施
系列文
Rive 的理論與實務30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言